<template>
  <div class="page-container">
    <div class="search">
      <el-form ref="searchParams" :inline="true" :model="searchParams" label-width="70px">
        <el-form-item label="访问码" prop="accessCode">
          <el-input v-model="searchParams.accessCode" placeholder="请输入访问码"></el-input>
        </el-form-item>
        <el-form-item label="信息来源" prop="source">
          <el-input v-model="searchParams.source" placeholder="请输入信息来源"></el-input>
        </el-form-item>
        <el-form-item label="留言时间" prop="time">
          <el-date-picker
            v-model="dateScope"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content-table">
      <el-table v-loading="loading" :data="messageList" border>
        <el-table-column align="center" label="序号" width="50">
          <template v-slot="scope">{{ scope.$index + (searchParams.pageNum - 1) * searchParams.pageSize + 1
            }}</template>
        </el-table-column>
        <el-table-column align="center" label="留言人" prop="accessUserName"></el-table-column>
        <el-table-column align="center" label="访问码" prop="accessCode"></el-table-column>
        <el-table-column align="center" label="留言内容" prop="content">
          <template v-slot="scope">
            <el-popover placement="top-start" trigger="click" width="400">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>留言内容</span>
                </div>
                <div class="text item">
                  {{ scope.row.content || '-' }}
                </div>
              </el-card>
              <div slot="reference" class="tableColumn">{{ scope.row.content || '-' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" label="留言时间" prop="createTime"></el-table-column>
        <el-table-column align="center" label="信息来源" prop="source"></el-table-column>
        <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
          <template v-slot="scope">
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :limit.sync="searchParams.pageSize" :page.sync="searchParams.pageNum" :total="total"
                  @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { gitMessageList, deleteMessage } from '@/api/messageManagement/messageManagement'

export default {
  name: 'messageManagement',
  components:{

  },
  data() {
    return {
      messageList: [],
      searchParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: true,
      total: 0,
      dateScope:[]
    }
  },
  computed: {

  },
  async mounted() {
    await this.getList()
  },
  methods: {
    async handleSearch() {
      this.searchParams.pageNum = 1
      await this.getList()
    },
    handleReset() {
      this.dateScope = []
      this.searchParams = {
        pageNum: 1,
        pageSize: 10,
        accessCode: '',
        source: '',
        beginCreateTime: '',
        endCreateTime: '',
      }
      this.getList()
    },
    async getList() {
      this.loading = true
      if (this.dateScope && this.dateScope.length > 0 ) {
        this.searchParams.beginCreateTime = this.dateScope[0]
        this.searchParams.endCreateTime = this.dateScope[1]
      }
      let res = await gitMessageList(this.searchParams)
      this.messageList = (res && res.rows) ? res.rows : []
      this.total = res.total
      this.loading = false
    },
    //删除
    async handleDelete(row) {
      console.log(row)
      const baseId = row.baseId
      this.$confirm("是否确认删除吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function () {
          return deleteMessage(baseId);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(function () { });
    },
  },
  created() {

  },
}
</script>


<style lang="scss" scoped>
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index.scss";
@import  '@/assets/styles/customGlobal.scss';
.search {
  background: #fff;
  border-radius: 10px;
  padding: 15px 15px 0px 15px;
}

.content-table {
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;

  .contentBtn {
    display: flex;
    margin-bottom: 20px;
  }
}
.tableColumn {
  width: 100%;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.tableColumn:hover {
  color: #359eff;
}
</style>

